import React, { Component } from 'react'
import './index.css';
import axios from 'axios';
import {Link} from 'react-router-dom';

export default class DouYin extends Component {
    state = {
        data: []
    }
    render() {
        return (
            <div class="douyin-container">
                {
                    this.state.data.map(item => {
                        return <div key={item.id} className="item">
                                    <div className="img">
                                        <Link to={"/douyin/"+item.id}>
                                            <img width="100%" src={"http://127.0.0.1:8090" + item.cover_local} alt="" />
                                        </Link>
                                    </div>
                                    <div className="intro">
                                        {item.desc.substr(0,20)}
                                    </div>
                                    <div className="gap-5"></div>
                                    <div className="profile">
                                        <img width="32" src={"http://127.0.0.1:8090" + item.author_img_local} alt="" />
                                        <span>
                                            {item.nickname}
                                        </span>
                                    </div>
                                </div>
                    })
                }
                
            </div>
        )
    }

    async componentDidMount(){
        let result = await axios('http://127.0.0.1:8090/douyin?_start=0&_limit=20');

        this.setState({
            data: result.data
        })
    }
}
